<template>
    <div>
        <el-card>
            <template #header>
                <div class="f-between">
                    <span>归档周期</span>
                    <el-popover placement="top-start" title="修改周期" :width="320" trigger="click">
                        <AplidForm ref="formRef" v-bind="ArchFormConfig" v-model="formModel" @submit="onSubmit"> </AplidForm>
                        <template #reference>
                            <el-button type="primary">修改</el-button>
                        </template>
                    </el-popover>
                </div>
            </template>
            <div class="left flex1">
                <p>填报任务默认归档周期：任务下发开始，直到任务结束，每隔一段时间对填报数据归档一次</p>
                <p>当前周期: {{model.archivingDate}}分钟</p>
            </div>
        </el-card>

        <el-card class="mt10">
            <template #header>
                <div class="f-between">
                    <span>预警提示</span>
                    <el-popover placement="top-start" title="修改天数" :width="320" trigger="click">
                        <AplidForm ref="formRef" v-bind="FormConfig" v-model="formModel" @submit="onSubmit"> </AplidForm>
                        <template #reference>
                            <el-button  type="primary">修改</el-button>
                        </template>
                    </el-popover>
                </div>
            </template>
            <div class="left flex1">
                <p>填报任务预警提前量：填报任务即将到截至日期，提前几日开始每日提醒</p>
                <p>当前日期: 截至日期{{model.earlyWarningDate}}天</p>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import apiMod from '@/apiMod'


const model = reactive({
    archivingDate:0,
    earlyWarningDate:0,
})
const ArchFormConfig = {
    title: '归档周期',
    labelWidth: '100px',
    inline: false,
	showBtn: true,
	labelPosition: 'top',
    size:'small',
    column: [
        {
            label: '',
            prop: 'archivingDate',
            type: 'input',
            span:24,
            rules: [
                {
                    required: true,
                    message: '请输入（分钟）',
                },
            ],
        },
    ],
}
const FormConfig = {
    title: '预警设置',
    labelWidth: '100px',
    inline: false,
	showBtn: true,
	labelPosition: 'top',
    size:'small',
    column: [
        {
            label: '',
            prop: 'earlyWarningDate',
            type: 'input',
            span:24,
            rules: [
                {
                    required: true,
                    message: '请输入（单位：天，范围1-28',
                },
            ],
        },
    ],
}
const generateId = () => {
	return Math.floor(Math.random() * 100000 + Math.random() * 20000 + Math.random() * 5000)
}

const formModel = ref({
    id:undefined,
    archivingDate:0,
    earlyWarningDate:0,
})
const onSubmit = (form,done)=> {
    const baseApi = form.id?'view_sscManagementSetting_edit':'view_sscManagementSetting_add'
    apiMod[baseApi]({...form, batch:generateId()}).then(res => {
        getInitData()
    })
    done()
}

const getInitData = ()=> {
    apiMod.view_sscManagementSetting_page().then(res => {
        const {records} = res.data
        if(records.length>0) {
            formModel.value.id = records[0].id
            formModel.value.archivingDate =  model.archivingDate = records[0].archivingDate
            formModel.value.earlyWarningDate =  model.earlyWarningDate = records[0].earlyWarningDate
        }
    })
}
onMounted(()=> {
    getInitData()
})
</script>

<style scoped></style>